<template>
  <el-table
      :data="useSignTable"
      header-align="center"
      v-loading="loading"
      element-loading-text="请稍等...">
    <el-table-column prop="sealSign.signId" label="任务ID" align="center" min-width="180"/>
    <el-table-column prop="sealSign.signName" label="任务名称" min-width="180" align="center"/>
    <el-table-column prop="sealSign.signFileName" label="签署文件名称" min-width="180px" align="center"/>
    <el-table-column prop="antiFakeUser" label="印章使用人" min-width="180px" align="center" />
    <el-table-column prop="antiFakeTime" label="印章使用时间" min-width="180px" align="center" />
    <el-table-column label="任务状态" align="center">
      <template #default="scope">
        <div v-if="scope.row.sealSign.signStatus === 1">
          <span class="status_icon" style="background-color: #EA1B29"></span><span>已过期</span>
        </div>
        <div v-if="scope.row.sealSign.signStatus === 2">
          <span class="status_icon" style="background-color: #cccccc"></span><span>已撤销</span>
        </div>
        <div v-if="scope.row.sealSign.signStatus === 3">
          <span class="status_icon" style="background-color: #5596f4"></span><span>进行中</span>
        </div>
        <div v-if="scope.row.sealSign.signStatus === 4">
          <span class="status_icon" style="background-color: #0CB618"></span><span>已完成</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center" width="200px">
      <template #default="scope">
        <el-button type="text" size="small" @click="getDetail(scope.$index, scope.row)">查看任务详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      :page-sizes="[10, 15, 20, 25]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      align="center"
  >
  </el-pagination>
</template>

<script setup>
import {getAntiFakeSealListByTemplateIdApi, getAntiFakeSealNumByTemplateIdApi} from '../../../api/sealAntiFake';
import {dateFormat} from '../../../utils/util';
import {ElMessage} from 'element-plus';
import {ref,getCurrentInstance} from 'vue';
import {defineProps} from 'vue';

const {proxy} = getCurrentInstance()
const loading = ref(false)

//获取父组件传参的数据
const props =defineProps({
  sealId: "",
})
let sealId = props.sealId

/**
 * 获取列表
 * @param purpose
 */
const getAntiFakeSealListByTemplateId = (purpose) =>{
  loading.value = true
  getAntiFakeSealListByTemplateIdApi(currentPage.value,pageSize.value,sealId,purpose)
      .then(res=>{
        let data = res.data.result
        for(let i=0;i<data.length;i++){
          data[i].antiFakeTime = dateFormat("YYYY-mm-dd HH:MM:SS",new Date(data[i].antiFakeTime))
        }
        useSignTable.value = data
        loading.value = false
      }).catch(res=>{
    ElMessage.error(res)
  })
}
/**
 * 获取数量
 * @param purpose
 */
const getAntiFakeSealNumByTemplateId = (purpose) => {
  getAntiFakeSealNumByTemplateIdApi(sealId,purpose)
      .then(res=>{
        let data = res.data.result
        totalNum.value = data
      }).catch(res=>{
    ElMessage.error(res)
  })

}

// 签署文件--分页代码
const totalNum = ref(0)
const currentPage=ref(1)
const pageSize=ref(10)

const handleCurrentChange = (currPage) => {
  currentPage.value = currPage
  getAntiFakeSealListByTemplateId(1)
  window.scrollTo(0, 175);
}

const handleSizeChange = (val) => {
  pageSize.value=val
  getAntiFakeSealListByTemplateId(1)
}

/**
 * 获取 文件签署 列表
 */
getAntiFakeSealListByTemplateId(1)
getAntiFakeSealNumByTemplateId(1)
const useSignTable = ref([])

/**
 * 跳转到签署文件的详情页
 * @param index
 * @param row
 */
const getDetail = (index,row) => {
  proxy.$router.push({
    path:'/sign/seal-anti',
    query:{
      signId: row.sealSign.signId
    }
  })
}
</script>

<style scoped>
.status_icon{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: red;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  margin-right: 6px;
}
</style>
